<template>
  <div>
    <!--主要就是这 哈哈啊哈哈-->
    <!--使用了container布局-->
<!--    <el-container>-->
<!--      <el-header>-->
<!--        &lt;!&ndash; 导入log：  后面更换成自己的  &ndash;&gt;-->
<!--        &lt;!&ndash;        <img class="mlogo" src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=ccb1b0d34b03a61f5c049019ecad9e38&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fd5628535e5dde711ef5f72fba0efce1b9d166129.jpg" alt="">&ndash;&gt;-->
<!--        <div class="logword">CQUPT Forum</div>-->
<!--      </el-header>-->

      <div class="main">
        <el-card class="logincard">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="input">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
              </el-form-item>
            </div>
            <el-form-item class="button">
              <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="register"><el-link  type="primary" href="/#/register">注册</el-link></div>
        </el-card>
      </div>
<!--    </el-container>-->

  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请选择密码', trigger: 'change'}
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          const _this = this   //_this才指的是vue哈  全局
          //登录请求哈  发送的是ruleForm
          //注意 this的区分
          this.$axios.post('/login', this.ruleForm).then(res => {

            //这里面直接使用 this代表请求（axios对象的）
            console.log(res.data)

            //拿到后端生成的jwt
            //为了让所有组件都能 拿到jwt：需要全局配置  也就是store/index.js
            const jwt = res.headers['authorization']
            const userinfo = res.data.data //后端返回的登录用户信息（不包含密码）

            // 把数据共享出去  方法再store/index.js中  将jwt存放在localStorage
            //固定写法$store.commit   属于vuex的内容
            _this.$store.commit("SET_TOKEN", jwt)
            _this.$store.commit("SET_USERINFO", userinfo)

            // 获取测试   浏览器f12 的 application 的左侧栏
            console.log(_this.$store.getters.getUser)

            //登陆后 push 到主页面
            if (this._isMobile()) {
              // alert("手机端");
              console.log('手机端')
              this.$router.replace('/mindex');
            } else {
              console.log('pc端')
              // this.$router.replace('/pc');
              this.$router.replace('/blogs');
            }

            //这里  有个逻辑没实现  登陆失败  也就是说jwt用户登陆失败
            //所以要加上一个全局的 拦截捕获  并对用户友好提示
            //在axios.js中
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag;
    },
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  /*background-color: #B3C0D1;*/
  /*color: #333;*/
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

/*将 输入框组件居中*/
.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/*配置header的图片*/
.mlogo {
  height: 60%;
  margin-top: 10px;
}

.demo-ruleForm {
  max-width: 500px;
  margin: 0 auto;
}

.logword {
  /*color: #409EFF;*/
  font-weight: bold;
  font-size: large;
}

.button {
  position: relative;
  top: 30px;
  right: 50px;
}

.input {
  position: relative;
  right: 30px;
}
.logincard {
  position: relative;
  width: 400px;
  top: 100px;
  margin: auto;
  text-align: center;
}

.main {
  background-image: url("http://qtrqnpw61.hn-bkt.clouddn.com/%E8%83%8C%E6%99%AF.png");
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  margin: auto;
  top: 50px;
  /*background-image: linear-gradient(180deg, #3bbcff, #4af4ff);*/
  height: 500px;
}

.register {
  text-align: right;
  position: relative;
  top: 10px;
}

</style>